<template>
  <div>
    <sui-container style="padding: 50px">
      <h2 is="sui-header">
        Form
        <a href="http://localhost:8080/" is="sui-button" style="float: right ">主页</a>
      </h2>
      <sui-divider/>
      <sui-form>
        <sui-form-fields fields="two">
          <sui-form-field error :width="6" required>
            <label for="">姓名</label>
            <input type="text">
          </sui-form-field>
          <sui-form-field :width="10">
            <label for="">电话</label>
            <input readonly value="12345" type="text" disabled>
          </sui-form-field>
        </sui-form-fields>
        <sui-form-field>
          <label for="">国家</label>
          <sui-dropdown
            multiple
            :options="currentCountry"
            placeholder="选择国家"
            selection
            v-model="current"
          />
        </sui-form-field>
        <sui-form-fields inline>
          <label for="payment">选择支付方式</label>
          <sui-form-field>
            <sui-checkbox radio name="payment" label="支付宝"/>
            <sui-checkbox radio name="payment" label="Paypal"/>
          </sui-form-field>
        </sui-form-fields>
        <sui-form-field inline>
          <sui-checkbox toggle label="短信通知"></sui-checkbox>
          <sui-checkbox slider label="短信通知"></sui-checkbox>
        </sui-form-field>
        <sui-form-field>
          <sui-form error :loading="load">
            <sui-message success>
              <sui-message-head>测试</sui-message-head>
              <p>Test</p>
            </sui-message>
            <sui-message warning>
              <sui-message-head>测试</sui-message-head>
              <p>Test</p>
            </sui-message>
            <sui-message error>
              <sui-message-head>测试</sui-message-head>
              <p>Test</p>
            </sui-message>
          </sui-form>
        </sui-form-field>
        <sui-button type="submit">提交</sui-button>
      </sui-form>
    </sui-container>
  </div>
</template>

<script>
export default {
  name: 'Form',
  data () {
    return {
      load: true,
      current: '',
      currentCountry: [
        { key: 'tl', value: 'tl', flag: 'tl', text: 'Timorleste' },
        { key: 'tg', value: 'tg', flag: 'tg', text: 'Togo' },
        { key: 'tk', value: 'tk', flag: 'tk', text: 'Tokelau' },
        { key: 'to', value: 'to', flag: 'to', text: 'Tonga' },
        { key: 'tt', value: 'tt', flag: 'tt', text: 'Trinidad' }
      ]
    }
  }
}
</script>

<style scoped>

</style>
